<template>
  <div>
    <div
      v-for="index in maxValue"
      :key="index"
      @mousemove="mousemoveStarItem($event, index)"
      class="iconfont icon-star star-item star-placeholder"
    >
      <div
        class="iconfont icon-star star-item star-active"
        :style="{ width: getWidth(index), color: activeColor }"
      />
    </div>
    <span class="star-value" :style="{ color: activeColor }">
      {{ starValue }}
    </span>
  </div>
</template>

<script>
import "../../../../style/icon-star.css";

export default {
  data() {
    return {
      value: 0,
    };
  },
  created() {},
  updated() {},
  props: {
    maxValue: {
      type: Number,
      default: 5,
    },
    activeColor: {
      type: String,
      default: "#ff7e28",
    },
  },
  computed: {
    starValue() {
      return this.value.toFixed(1);
    },
  },
  updated() {
      this.$emit("star", this.starValue);
  },
  methods: {
    getWidth(index) {
      const gap = this.value - index + 1;
      if (gap >= 1) {
        return "100%";
      } else if (gap <= 0) {
        return 0;
      } else {
        return gap * 100 + "%";
      }
    },
    mousemoveStarItem(e, index) {
      const width = e.currentTarget.offsetWidth;
      this.value = index + e.offsetX / width - 1;
    },
  },
};
</script>


<style scoped>
.star-item {
  display: inline-block;
  font-size: 33px;
}

.star-placeholder {
  cursor: pointer;
  position: relative;
  color: #e9e9e9;
}
.star-active {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.star-value {
  font-size: 33px;
  margin-left: 10px;
}
</style>
